<template>
	<div class="container">
		<div class="order-top arrow">
			<div class="order-top-main">
				<span class="my-order-sapm">我的订单</span>
				<span class="my-order-total-sapm">查看全部订单</span>
			</div>
		</div>
		<hr style="margin-left: .3rem;" />
		<ul class="order-main">
			<li @click="goOrderDetail(1)">
				<img src="../../assets/icon/my-icon/daifukuan.png" />
				<span>待付款</span>
			</li>
			<li @click="goOrderDetail(2)">
				<img src="../../assets/icon/my-icon/daifahuo.png" />
				<span>待发货</span>
			</li>
			<li @click="goOrderDetail(3)">
				<img src="../../assets/icon/my-icon/icon-fahuo.png" />
				<span>待收货</span>
			</li>
			<li @click="goOrderDetail(4)">
				<img src="../../assets/icon/my-icon/xunjiazidanicocopy.png" />
				<span>已完成</span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goOrderDetail(count) {
				switch (count) {
					case 1:
					this.$router.push({
						name: 'order-detail-index'
					})
					console.log('待付款')
						break;
					case 2:
					console.log('待发货')
						break;
					case 3:
					console.log('待收获')
						break;
					case 4:
					console.log('已完成')
				}
			}
		},
	}
</script>

<style lang="less" scoped="scoped">
	.container {
		.order-top {
			padding: 0 .3rem;
			height: .8rem;
			display: flex;

			.order-top-main {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;

				span:first-child {
					font-size: 14px;
					color: #4A4A4A;
				}

				span:last-child {
					font-size: 12px;
					color: #8E8E93;
				}
			}
		}

		.order-main {
			height: 1.7rem;
			width: 100vw;
			display: flex;

			li {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				img {
					width: .68rem;
					margin-bottom: .2rem;
				}
			}
		}
	}
</style>
